/**
 * Created by songjuxi on 2017/3/29.
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button, DatePicker, Row, Col, Select, InputNumber } from 'jdcloudui';
import styles from './style/styles.less';
import queryString from 'query-string';
const FormItem = Form.Item;
const Option =Select.Option;
const PAGE_SIZE=10;

@Form.create()
export default class BuyerBillSearch extends Component{
    
  constructor(props,context){
    super(props,context)
  }
  static contextTypes = {
    store: PropTypes.object
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.pageNum=values.pageNum||1
        values.pageSize=PAGE_SIZE||10;
        (values.purchaserName=='')&&(values.purchaserName=null);
        (values.orderNo=='')&&(values.orderNo=null);
        let {orderTimeBegin,orderTimeEnd}=values
        orderTimeBegin&&(orderTimeBegin=orderTimeBegin.format('YYYY-MM-DD 00:00:00'))
        orderTimeEnd&&(orderTimeEnd=orderTimeEnd.format('YYYY-MM-DD 24:00:00'))
        values.orderTimeEnd=orderTimeEnd
        values.orderTimeBegin=orderTimeBegin
        console.log('Received values of form: ', values);
        this.props.saveFormData(values)
        this.props.buyerBillSearch(values).then(
          (result)=>{
            console.log('SearchData success')},
          (error)=>{
            console.log('SearchData fail')
          }
        );
      }
    });
  }
  
  render(){
    const invoiceStatus = queryString.parse(this.context.store.location.search).invoiceStatus;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const config = {
      rules: [{ type: 'object', required: false, message: 'Please select time!' }],
    };

    return <div className="ui-search">
        <Row className="l-content">
                <Form layout="inline" onSubmit={this.handleSubmit} >
                    <FormItem label="订单编号:">
                        {getFieldDecorator(`orderNo`, {
                            initialValue: '',
                        })(
                            <Input placeholder="" style={{ width: 150}}/>
                        )}
                    </FormItem>
                    <Col style={{display:'inline-block'}}>
                        <FormItem label="下单时间:">
                            {getFieldDecorator('orderTimeBegin', config)(
                                <DatePicker style={{ width: 150}} />
                            )}
                        </FormItem>
                        <FormItem label="至:" className={styles.smallLabel}>
                            {getFieldDecorator('orderTimeEnd', config)(
                                <DatePicker style={{ width: 150}} />
                            )}
                        </FormItem>
                    </Col>

                    <FormItem label="采购商名称:">
                        {getFieldDecorator(`purchaserName`, {
                            initialValue:null,
                        })(
                            <Input placeholder="" style={{ width: 150}}/>
                        )}
                    </FormItem>
                    <Col style={{display:'inline-block'}}>
                        <FormItem label="订单金额:">
                            {getFieldDecorator('minPaymentPrice', )(
                                <InputNumber
                                    step="500"
                                    placeholder=""
                                    min={0}
                                    style={{ width: 150}}/>
                            )}
                        </FormItem>
                        <FormItem label="至:" className={styles.smallLabel}>
                            {getFieldDecorator('maxPaymentPrice', )(
                                <InputNumber
                                    step="500"
                                    placeholder=""
                                    min={0}
                                    style={{ width: 150}}/>
                            )}
                        </FormItem>
                    </Col>
                    <FormItem
                        label="开票状态"
                    >
                        {getFieldDecorator('status', {
                            initialValue: this.props.invoiceStatus
                        })(
                            <Select  style={{ width: 120 }} >
                                <Option value="">全部</Option>
                                <Option value="1">已开票</Option>
                                <Option value="0">未开票</Option>
                            </Select>
                        )}
                    </FormItem>
                    <div className="r-action" >
                        <Button type="primary" htmlType="submit">查 询</Button>
                    </div>

                </Form>

        </Row>
    </div>
  }
}
